# Component: Share

Social media distribution menu with brand-specific styling

Social Block

### BEM Anatomy

| Type      | Class Name            | Description                                                                          |
| --------- | --------------------- | ------------------------------------------------------------------------------------ |
| ==Block== | `.as-share`           | The flex container. Centrally aligns all sharing buttons.                            |
| Element   | `__button`            | The base interactive element. Manages shared transitions, margins, and icon spacing. |
| Modifier  | `__button--facebook`  | Applies the specific blue brand color and shadow glow for Facebook.                  |
| Modifier  | `__button--twitter`   | Applies the black brand color and shadow glow for X/Twitter.                         |
| Modifier  | `__button--linkedin`  | Applies the professional blue brand color (`#0A66C2`) and associated hover states.   |
| Modifier  | `__button--pinterest` | Applies the red brand color (`#BD081C`) and unique shadow glow for Pinterest.        |
| Modifier  | `__button--whatsapp`  | Applies the green brand color (`#25D366`) for WhatsApp.                              |
| Modifier  | `__button--bluesky`   | Applies the signature blue brand color (`#0560ff`) for the Bluesky social platform.  |

### Brand Specific Interactions

Each button modifier overrides the background color and applies a matching box-shadow on hover. All buttons share a `translateY(-1px)` transition to provide tactile feedback to the user.

##### Generated HTML (Mixed Output)

```html
<div class="as-share">
    <!-- Button Action -->
    <button class="as-share__button as-share__button--facebook">
        <i class="fa-brands fa-facebook"></i>
        <span>facebook</span>
    </button>
    
    <!-- Direct Link Action -->
    <a href="whatsapp://send?..." class="as-share__button as-share__button--whatsapp">
        <i class="fa-brands fa-whatsapp"></i>
    </a>
</div>
```

##### SCSS

```scss
.as-share {
  display: flex;
  justify-content: center;

  &__button {
    color: white;
    transition: all 200ms ease-out;

    &:hover {
      // Subtle "lift" effect
      transform: translateY(-1px);
    }
    
    &--linkedin {
      background: #0077B5;
      &:hover {
        background: #1087C5;
        box-shadow: 0 0 4px 0 rgba(16, 135, 197, 0.5);
      }
    }
  }
}
```
